<template>
	<view class="container">
		<v-menu-slide :title-items="menuTitles" :content-items="menuContents" relation-key="categoryId" direction="y" :default-active="activeIndex" @change="handleMenuChange">
			<!-- 插槽内容 -->
		</v-menu-slide>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const activeIndex = ref(0);

// 分开的标题数据
const menuTitles = ref([
	{ categoryId: 'cat1', title: '推荐' },
	{ categoryId: 'cat2', title: '热门' },
	{ categoryId: 'cat3', title: '最新' }
]);

// 分开的内容数据
const menuContents = ref([
	{
		categoryId: 'cat1',
		title: '推荐',
		list: ['推荐内容1', '推荐内容2', '推荐内容3']
	},
	{
		categoryId: 'cat2',
		title: '热门',
		list: ['热门内容1', '热门内容2', '热门内容3']
	},
	{
		categoryId: 'cat3',
		title: '最新',
		list: ['最新内容1', '最新内容2', '最新内容3']
	}
]);

const handleMenuChange = (index) => {
	console.log('切换到菜单项:', index);
};
</script>
